import {AfterViewInit,AfterContentInit,Component, OnInit, ElementRef,Input,Output,EventEmitter} from '@angular/core';
import {TileObject} from './tile.component';

@Component({
    selector: 'containerTile',
    template: 
    `
        <div class="containerTile">
            <div class="containerTileHeader"><span>{{containerTiles.Title}}</span></div>
            <div class="containerTileContent">
                <div class="titleContent" *ngFor="let item of containerTiles.tiles">
                        <tile (TilePress)="tilePress($event)" (RemoveTile)="RemoveTile($event)" [tileObject]=item></tile>
                </div>
            </div>
        </div>
    `       
})

export class ContainerTile implements OnInit , AfterContentInit ,AfterViewInit{
    @Input() containerTiles: ContainerTileObject;
    @Output() TilePress = new EventEmitter();
    constructor(private element: ElementRef) {   
    }
    ngOnInit() {

    }
    ngAfterContentInit() {
       
    }
    ngAfterViewInit() {
         
    }
    RemoveTile(tile:any){
        this.containerTiles.tiles.splice(this.containerTiles.tiles.indexOf(tile),1);
    }

    tilePress(tile:any){
        this.TilePress.emit(tile)
    }
    
} 

export class ContainerTileObject{
    public Title : string;
    public tiles: TileObject[];
}
